<template>
    <div class="w750" :class="themes.theme">
        <div class="submit-order">
            <div class="submit-list">
                <div class="submit-con">
                    <div class="order-style" @click="logisticsShow">
                        <div class="right">
                            <span class="right-em">物流公司: {{ logisticsCompany }}</span>
                            <i class="arr"><img src="../../../assets/images/arrow.png" alt="" /></i>
                        </div>
                    </div>
                    <div class="order-style bt">
                        <div class="words">
                            <input class="num" type="text" placeholder="填写物流单号" v-model="expressNoInputEvent" maxlength="20" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="b-btn">
            <span class="btn-r" @click="subReturngoods('save')" v-if="!flag">确认提交</span>
            <span class="btn-r" @click="subReturngoods('edit')" v-else>确认修改</span>
        </div>

        <van-popup v-model="show" position="bottom" :close-on-click-overlay="false">
            <van-picker :columns="columns" @cancel="onCancel" show-toolbar title="请选择配送物流公司" @confirm="onConfirm" :default-index="index" />
        </van-popup>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { returnGoods } from 'api/refunds'
import { afterSale } from 'api/afterSale'

export default {
    data() {
        return {
            expressNoInputEvent: '', //物流单号
            show: false,
            logisticsCompany: '', //物流名称
            columns: [],
            flag: false, //是否修改物流
            index: 0 //默认选择物流公司
        }
    },
    mounted() {
        const expressName = this.$route.query.expressName
        afterSale.getReturnGoodsLogistics().then((res) => {
            if (res.status == 1) {
                this.columns = res.result
                //如果为真 则为修改物流
                if (expressName) {
                    this.logisticsCompany = expressName
                    this.flag = true
                    this.expressNoInputEvent = this.$route.query.expressNo
                    this.index = res.result.findIndex((item) => item == expressName)
                } else {
                    this.logisticsCompany = res.result[0]
                }
            }
        })
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        logisticsShow() {
            this.show = true
        },
        subReturngoods(type) {
            let that = this
            if (!this.expressNoInputEvent) {
                this.$toast('请输入物流单号！')
            }
            let reg = /^[0-9a-zA-Z]+$/
            if (!reg.test(this.expressNoInputEvent)) {
                this.$toast('仅能输入数字和字母')
                return
            }
            //  编辑地址
            if (type == 'edit') {
                afterSale
                    .UpdataReturnGoodsLogistics({
                        expressName: this.logisticsCompany,
                        expressNo: this.expressNoInputEvent,
                        refundSn: this.$route.query.refundSn
                    })
                    .then((res) => {
                        if (res.status == 1) {
                            this.$toast({
                                message: '提交成功',
                                duration: 1000
                            })
                            setTimeout(() => {
                                that.goback()
                            }, 1300)
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 1000
                            })
                        }
                    })
            } else {
                // //填写地址
                afterSale
                    .saveReturnGoodsLogistics({
                        expressName: this.logisticsCompany,
                        expressNo: this.expressNoInputEvent,
                        refundSn: this.$route.query.refundSn
                    })
                    .then((res) => {
                        if (res.status == 1) {
                            this.$toast({
                                message: '提交成功',
                                duration: 1000
                            })
                            setTimeout(() => {
                                that.goback()
                            }, 1300)
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 1000
                            })
                        }
                    })
            }
        },
        onConfirm(e) {
            this.show = false
            this.logisticsCompany = e
        },
        onCancel() {
            this.show = false
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    components: {}
}
</script>

<style src="../../../assets/css/return.css" scoped></style>
<style src="../../../assets/css/submit-order.css" scoped></style>
<style scoped>
.gray-body {
    min-height: 100%;
}
.submit-order {
    margin-bottom: 0;
}
.submit-order .submit-list .submit-con {
    margin-top: 0;
}
</style>
